<template>
    <div>
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white">
            <template>
                <el-tabs v-model="activeName2" type="card" >
                    <el-tab-pane label="目标统计" name="first">

                        <el-row>
                            <el-col :span="12">
                                <el-date-picker
                                        v-model="years"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @change="selectyear"
                                        value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                        style="margin-left: 210px; height:35px">
                                </el-date-picker>

                            </el-col>
                            <el-col :span="2">
                                <el-select v-model="leixing" filterable placeholder="请选择"  @change="lxmethod">
                                    <el-option
                                            v-for="item in lxoption"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </el-row>
                        <!--分页框-->
                        <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                            <div style="text-align: center">
                                <el-row>
                                    <el-col :span="24">
                                        <div id="echartsDemo" style="border:1px solid white;width: 1160px;height: 550px;margin-top: 50px;margin: 0px auto">
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>

                        <!--分页框-->
                        <el-row>
                            <el-col :span="12">
                                <el-date-picker
                                        v-model="value2"
                                        type="month"
                                        placeholder="选择月"
                                        @change="yueselect"
                                        value-format="yyyy-MM" format="yyyy-MM"
                                        style="margin-left: 210px; height:35px">
                                </el-date-picker>

                            </el-col>
                            <el-col :span="2">
                                <el-select v-model="leixing1" filterable placeholder="请选择"  @change="lxmethod1">
                                    <el-option
                                            v-for="item in lxoption"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </el-row>
                        <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                            <div style="text-align: center">
                                <el-row>
                                    <el-col :span="24">
                                        <div id="echartsDemo1" style="border:1px solid white;width: 1160px;height: 550px;margin-top: 50px;margin: 0px auto">
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="目标管理" name="second">
                        <el-row>
                            <el-col :span="7">
                                <div style="height: 540px;border-right: 2px solid #E4E7ED">
                                    <span>部门管理</span>
                                    <el-input placeholder="部门名称" v-model="depnameinput" style="margin-left: 20px;width: 230px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" ></i>
                                    </el-input>
                                    <el-tree style="margin-top: 20px"
                                             :data="mydepdata" default-expand-all :filter-node-method="filterNode" ref="deptree"
                                             @node-click="myrolechangetime"
                                             :expand-on-click-node="false"
                                    >
                                     <span class="custom-tree-node"  slot-scope="s">
                                        <span>{{ s.data.label }}</span>
                                        <el-popover
                                                placement="left-start"
                                                width="100"
                                                trigger="hover">
                                         </el-popover>
                                    </span>
                                    </el-tree>
                                </div>
                            </el-col>
                            <el-col :span="17">
                                <div style="height: 540px">
                                    <el-row>
                                        <el-col :span="7">
                                            <el-date-picker
                                                    v-model="yearr"
                                                    type="date"
                                                    placeholder="选择日期"
                                                    value-format="yyyy-MM" format="yyyy-MM"
                                                    style="margin-left: 20px">
                                            </el-date-picker>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-button style="margin-left: 20px" size="small" type="primary" @click="adddeptmb=!adddeptmb">新建部门目标</el-button>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-button style="margin-left: 20px" size="small" type="primary" @click="addempshowview">切换查看目标</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-table v-show="qiehuanbm"
                                              :data="deptmb"
                                              style="width: 96%;margin: 0 auto;margin-top: 20px">
                                        <el-table-column
                                                align="center"
                                                prop="xsmbId"
                                                label="id">
                                        </el-table-column>
                                        <el-table-column
                                                prop="xsmbZddate"
                                                align="center"
                                                label="日期">
                                            <template slot-scope="s">
                                                {{s.row.xsmbHuikuangje | formatDate}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="qdepFrom.depName"
                                                align="center"
                                                label="部门">
                                        </el-table-column>
                                        <el-table-column
                                                prop="xsmbQianyuesl"
                                                align="center"
                                                label="签约总额">
                                        </el-table-column>
                                        <el-table-column
                                                prop="xsmbHuikuangje"
                                                align="center"
                                                label="回款总额">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="操作">
                                            <template>
                                                <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                <i style="font-size:18px;color: #409EFF" class="el-icon-edit"></i>
                                                <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"></i>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-table v-show="qiehuanyg"
                                              style="width: 96%;margin: 0 auto;margin-top: 20px"
                                              :data="lxsmbcbss"
                                    >
                                        <el-table-column
                                                align="center"
                                                prop="xsbmcbId"
                                                label="id">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="日期">
                                            <template slot-scope="s">
                                                {{s.row.xsmbcbDate | formatDate}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="qempFrom.empName"
                                                label="员工">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="xsmbcbHuikuangje"
                                                label="回款总数">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="xsmbcbQianyuesl"
                                                label="签约总数">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="操作">
                                            <template>
                                                <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                <i style="font-size:18px;color: #409EFF" class="el-icon-edit"></i>
                                                <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"></i>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!--分页框-->
                                    <!--                                    <div style="margin-top: 10px;background-color: white">-->
                                    <!--                                        <div style="text-align: center">-->
                                    <!--                                            <el-pagination-->
                                    <!--                                                    @size-change="handleSizeChange"-->
                                    <!--                                                    @current-change="handleCurrentChange"-->
                                    <!--                                                    :current-page="pageNum"-->
                                    <!--                                                    :page-sizes="[5,8, 10, 20, 40]"-->
                                    <!--                                                    :page-size="pageSize"-->
                                    <!--                                                    layout="total, sizes, prev, pager, next, jumper"-->
                                    <!--                                                    :total="emptabledata.length"-->
                                    <!--                                            >-->
                                    <!--                                            </el-pagination>-->
                                    <!--                                        </div>-->
                                    <!--                                    </div>-->
                                </div>
                            </el-col>
                        </el-row>

                        <el-dialog
                                title="新增销售部目标"
                                :visible.sync="adddeptmb"
                                width="60%"
                        >
                            <div class="shugan"></div>
                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                            <br/>
                            <br/>
                            <el-form style="margin-top:5px;margin-left: 40px;" size="mini" :model="AddBmmb" >
                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item style="width:350px;">
                                            <label slot="label" style="font-size: 13px;">部门：</label><br/>

                                            <el-cascader
                                                    @change="bumenduixiang"
                                                    v-model="AddBmmb.qdepFrom"
                                                    :options="myempdepoptions"
                                                    :props="{ checkStrictly: true}"
                                                    clearable>
                                            </el-cascader>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item style="width:250px" >
                                            <label slot="label" style="font-size: 13px">部门创建时间：</label><br/>
                                            <el-date-picker
                                                    v-model="AddBmmb.xsmbZddate"
                                                    type="date"
                                                    placeholder="选择日期"
                                                    value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                                    style="width: 250px">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item style="width:250px;">
                                            <label slot="label" style="font-size: 13px">部门本月签约目标：</label><br/>
                                            <el-input  v-model="AddBmmb.xsmbQianyuesl"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item style="width:250px" >
                                            <label slot="label" style="font-size: 13px">部门本月回款目标：</label><br/>
                                            <el-input v-model="AddBmmb.xsmbHuikuangje"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item style="width:350px;">
                                            <label slot="label" style="font-size: 13px;">员工：</label><br/>
                                            <el-cascader
                                                    :options="empdui"
                                                    :props="props"
                                                    collapse-tags
                                                    v-model="AddBmmb.lxsmbcbs.qempFrom"
                                                    clearable
                                            ></el-cascader>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item style="width:250px" >
                                            <label slot="label" style="font-size: 13px">员工创建时间：</label><br/>
                                            <el-date-picker
                                                    v-model="AddBmmb.lxsmbcbs.xsmbcbDate"
                                                    type="date"
                                                    placeholder="选择日期"
                                                    value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                                    style="width: 250px">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item style="width:250px;">
                                            <label slot="label" style="font-size: 13px">员工本月签约目标：</label><br/>
                                            <el-input  v-model="AddBmmb.lxsmbcbs.xsmbcbQianyuesl"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item style="width:250px" >
                                            <label slot="label" style="font-size: 13px">员工本月回款目标：</label><br/>
                                            <el-input v-model="AddBmmb.lxsmbcbs.xsmbcbHuikuangje"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="adddeptmb = false">取 消</el-button>
                            <el-button type="primary" @click="adddbumenmubiao()">确 定</el-button>
                          </span>
                        </el-dialog>

                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </div>

</template>
<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "Lxsmb",
        inject: ['reload'], // 引入方法
        data() {
            return {
                props: {
                    multiple: true,
                    value:'empId',
                    label:'empName',
                },
                activeName2:'second',
                qiehuanyg:false,//部门表格显藏
                qiehuanbm:true,//员工表格显藏
                myrolename:'所有',//选中的角色名
                myempdepoptions:[],//部门联级选择器
                AddBmmb:{
                    xsmbHuikuangje:'',//回款总额
                    xsmbQianyuesl:'',//签约总数
                    xsmbZddate:'',//创建日期
                    qdepFrom:'',//部门对象
                    lxsmbcbs:{
                        xsmbcbHuikuangje:'',
                        xsmbcbQianyuesl:'',
                        xsmbcbDate:'',
                        qempFrom:[],
                    }
                },
                bumen:'',
                empdui:[],
                mydepdata: [],//所有部门管理
                depnameinput:'',//部门名称搜索
                deptmb:[],//部门目标集合
                lxsmbcbss:[],
                empmb:[],//员工部门集合
                yearr:'',
                years:['2019-01-01','2020-12-12'],
                yearslist:[],
                leixing:'签约总额',
                leixing1:'签约总额',
                value2:'2020-06',
                lxoption:[{
                    value: '签约总额',
                    label: '签约总额'
                }, {
                    value: '回款总额',
                    label: '回款总额'
                }],
                adddeptmb:false,

            };
        },

        methods: {

            digui(data){
                window.console.log(data);
                for (var i=0;i<data.length;i++){
                    // window.console.log(i);
                    let maxArr=0
                    ;
                    for(var x = 0; x<data[i].length; x++) {
                        if (data[i].length == 1) {
                            maxArr = data[i][0];
                        } else {
                            if (maxArr < data[i][x]) {
                                maxArr = data[i][x];
                            }
                        }

                    }
                    this.$axios.post("http://localhost:8088/vue/depselect",this.qs.stringify(
                        {deptid:maxArr}))
                        .then(e=>{
                            window.console.log( e.data)
                        }).catch();

                    window.console.log("总的" + maxArr)
                }
            },

            //部门对象
            bumenduixiang(){
                let max=0;
                for(var i = 0;i<this.AddBmmb.qdepFrom.length;i++){
                    if(max<this.AddBmmb.qdepFrom[i]){
                        max=this.AddBmmb.qdepFrom[i];
                    }
                }
                if(this.AddBmmb.qdepFrom==""){
                    this.empdui=[]
                }
                this.$axios.post("http://localhost:8088/vue/depselect",this.qs.stringify(
                    {deptid:max})).then(e=>{
                    this.bumen =e.data.qdepFrom[0]          //查询该部门员工
                    this.$axios.post("http://localhost:8088/vue/empselect",this.qs.stringify(
                        {deptid:e.data.qdepFrom[0].depId})).then(e=>{
                        this.empdui=e.data.qdepFrom
                    }).catch();
                }).catch();
            },
            adddbumenmubiao(){
                this.jue = this.AddBmmb.lxsmbcbs.qempFrom;//把id存到临时数组
                this.AddBmmb.lxsmbcbs.qempFrom = [];//清空
                this.jue.forEach((items)=>{
                    this.AddBmmb.lxsmbcbs.qempFrom.push(JSON.parse(items));
                })
                // window.console.log('list',this.AddBmmb.lxsmbcbs.qempFrom[i])
                this.$confirm('是否确定新增?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //this.AddBmmb.lxsmbcbs.qdepFrom=this.bumen;
                    var funs=JSON.stringify({AddBmmb:this.AddBmmb,});
                    window.console.log("funs",funs)
                    this.$axios.post("http://localhost:8088/vue/AddXsmb",this.qs.stringify(
                        {fun:funs})).then(()=>{
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '新增成功!',
                        });
                    }).catch(()=>{
                            this.$message({
                                showClose: true,
                                message: '新增失败',
                                type: 'error'
                            });
                        }
                    )
                }).catch(() => {
                    this.$message({
                        showClose: true,
                        type: 'info',
                        message: '已取消新增'
                    });
                });

                this.adddeptmb = false
            },
            qingkong(){
                this.AddBmmb.xsmbHuikuangje='';
                this.AddBmmb.xsmbQianyuesl='';
                this.AddBmmb.xsmbZddate='';
                this.AddBmmb.qdepFrom='';
            },

            lxmethod1(){
                this.yueselect();
            },
            yueselect(){
                this.$axios.post("http://localhost:8088/vue/ygyjselect",
                    this.qs.stringify({date3:this.value2})).then(v=>{
                    this.fivetatol(v.data);
                }).catch();
            },
            lxmethod(){
                this.selectyear();
            },
            selectyear(){
                var date1 =this.years[0]
                var date2 =this.years[1]
                this.$axios.post("http://localhost:8088/vue/yearselect",
                    this.qs.stringify({date1:date1,date2:date2})).then(v=>{
                    this.drawLine(v.data);
                }).catch();
            },
            myrolechangetime(w){
                this.savemyroleId =w.value;//保存我选择的角色ID
                this.myrolename = w.label;//保存我选择的角色名称
                if(w.label=="销售部"){
                    this.savemyroleId=""
                }
                this.selectAlldept();
                // this.lxsmbcbs=[];//清空上一次集合
            },
            //查询部门目标
            selectAlldept(){
                this.$axios.post("http://localhost:8088/vue/bumenmubiao",this.qs.stringify(
                    {deptid:this.savemyroleId}
                )).then(v=> {
                    this.lxsmbcbs = [];
                    this.deptmb = v.data;
                    for(let i=0;i<this.deptmb.length;i++){
                        for(let j=0;j<this.deptmb[i].lxsmbcbs.length;j++){
                            this.lxsmbcbs.splice(j,0,this.deptmb[i].lxsmbcbs[j]);
                        }
                    }

                }).catch(()=>{

                })
            },
            //树状图
            filterNode(value, data) {
                this.print("我在这");
                this.print(value);
                this.print(data);
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },


            /*初始化数据*/
            async initmyalldep(){
                await this.$axios.post("http://localhost:8088/myjurisdiction/selectmyalldep").then(v=> {
                    // this.mydepdata = v.data.mydepqx;
                    var a=v.data.mydepqx[0].children[3];
                    this.myempdepoptions.push(a);
                    this.mydepdata.push(a);
                    this.getTreeData(this.myempdepoptions);
                    //this.myempdepoptions = v.data.mydepqx[0].children[3];//部门级联选择器
                    this.print("我是部门树型");
                    this.print(v.data.mydepqx);
                }).catch(()=>{

                })
                this.roleflag = true;
            },
            /*点开新增员工弹框*/
            addempshowview(){
                this.qiehuanyg=!this.qiehuanyg;
                this.qiehuanbm=!this.qiehuanbm;
            },
            // 递归判断列表，把最后的children设为undefined
            getTreeData(data){
                for(var i=0;i<data.length;i++){
                    if(data[i].children.length===0){
                        // children若为空数组，则将children设为undefined
                        data[i].children=undefined;
                    }else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },
            //统计图
            drawLine (aa) {
                this.hkzhi=[]
                this.qianyuezhi=[]
                this.nianfen=aa.yearrd;
                this.mbthname ='';
                this.wchname ='';
                if(this.leixing=='回款总额'){
                    this.mbname='回款总目标'
                    this.wchname ='回款总业绩';
                    this.hkzhi =aa.gshk;
                    this.qianyuezhi=aa.hkmoney
                }else {
                    this.mbname='签约总目标'
                    this.wchname ='签约总业绩';
                    this.hkzhi =aa.gsqy;
                    this.qianyuezhi=aa.ymoney
                }
                let elementById = document.getElementById('echartsDemo')
                let echartsDemo = this.$echarts.init(elementById)
                var colors = [{
                    type: 'linear',
                    x: 0,
                    x2: 0,
                    y: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'red'
                    }]
                }, {
                    type: 'linear',
                    x: 0,
                    x2: 0,
                    y: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'blue'
                    }]
                }];
                var barWidth = 40;

                let option = {

                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        right: 500,
                        textStyle: {
                            color: 'backgroundColor',
                        },
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: 'back'
                            }
                        },
                        axisLabel: {
                            fontSize: 14
                        },
                        data: this.nianfen,//年
                    }],
                    yAxis: [{
                        type: 'value',
                        min: 0,
                        splitLine: {
                            lineStyle: {
                                color: 'back'
                            }
                        },
                        splitNumber: 5,


                    }],
                    series: [{
                        z: 1,
                        name: this.mbname,//目标主题
                        type: 'bar',
                        barWidth: barWidth,
                        data: this.hkzhi,//销售总目标
                        itemStyle: {
                            normal: {
                                color: colors[0]
                            },
                        }
                    },
                        {
                            z: 1,
                            name: this.wchname,//业绩主题
                            type: 'bar',
                            barGap: 0,
                            barWidth: barWidth,
                            data: this.qianyuezhi,//销售总业绩
                            itemStyle: {
                                normal: {
                                    color: colors[1]
                                }
                            }
                        }
                    ]
                }
                echartsDemo.setOption(option)

            },


            fivetatol(aa){
                this.mb=[]
                this.yeji=[]
                this.biaoti=[]
                this.biaoti1=[]
                this.ygname=aa.ygname;
                if(this.leixing1=='回款总额'){
                    this.biaoti='回款总目标'
                    this.biaoti1 ='回款总业绩';
                    this.yeji =aa.yghkyeji;
                    this.mb = aa.ygyhkmb
                }else {
                    this.biaoti='签约总目标'
                    this.biaoti1 ='签约总业绩';
                    this.yeji =aa.ygqyyeji;
                    this.mb = aa.ygyqymb
                }
                let elementById = document.getElementById('echartsDemo1')
                let echartsDemo1 = this.$echarts.init(elementById)
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        color: ["#F58080", "#47D8BE"],
                        data: [this.biaoti, this.biaoti1],
                        left: 'center',
                        bottom: 'bottom'
                    },
                    grid: {
                        top: 'middle',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        height: '80%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.ygname,
                        axisLine: {
                            lineStyle: {
                                color: "#999"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',

                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#DDD'
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#333"
                            },
                        },
                        nameTextStyle: {
                            color: "#999"
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    series: [{
                        name: this.biaoti,//目标
                        type: 'line',
                        data:  this.mb,
                        color: "#F58080",
                        lineStyle: {
                            normal: {
                                width: 5,
                                color: {
                                    type: 'linear',

                                    colorStops: [{
                                        offset: 0,
                                        color: '#FFCAD4' // 0% 处的颜色
                                    }, {
                                        offset: 0.4,
                                        color: '#F58080' // 100% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#F58080' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(245,128,128, 0.5)',
                                shadowBlur: 10,
                                shadowOffsetY: 7
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F58080',
                                borderWidth: 10,
                                /*shadowColor: 'rgba(72,216,191, 0.3)',
                                 shadowBlur: 100,*/
                                borderColor: "#F58080"
                            }
                        },
                        smooth: true
                    },
                        {
                            name: this.biaoti1,
                            type: 'line',
                            data: this.yeji,
                            lineStyle: {
                                normal: {
                                    width: 5,
                                    color: {
                                        type: 'linear',

                                        colorStops: [{
                                            offset: 0,
                                            color: '#AAF487' // 0% 处的颜色
                                        },
                                            {
                                                offset: 0.4,
                                                color: '#47D8BE' // 100% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#47D8BE' // 100% 处的颜色
                                            }
                                        ],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(71,216,190, 0.5)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 7
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#AAF487',
                                    borderWidth: 10,
                                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                                     shadowBlur: 100,*/
                                    borderColor: "#AAF487"
                                }
                            },
                            smooth: true
                        },

                    ]
                };
                echartsDemo1.setOption(option)

            }
        },
        created:function(){
            this.initmyalldep();
            this.selectAlldept();
            this.selectyear();
            this.yueselect()
        },
        mounted () {

        },
        watch: {
            depnameinput(val) {
                this.$refs.deptree.filter(val);
            },

        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            },
        }

    }
</script>
<style scoped>

    .addview:hover{
        color: white;
    }
    a{
        text-decoration: none;
        color: #409EFF;
    }
    a:hover{
        color: white;
    }
    .busin:hover{
        color: #3E84E9;
        cursor:pointer;
    }
    .businame{
        color: #606266;
    }
    .businame:hover{
        color: #409EFF;
        cursor:pointer;
    }
    .operate{
        font-size: 12px;
        height: 40px;
        padding: 0 20px;
        color: #777;
        background: white;
    }
    .selected—title{
        margin-top: 15px;
        margin-left: -6px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
    }
    .selected—title1{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title1 span{
        margin-left: 24px;
    }
    .selected—title1 span:hover{
        color:#409eff;
    }
    .selected—title2{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 129px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title2 span{
        margin-left: 24px;
    }
    .selected—title2 span:hover{
        color:#409eff;
    }

    .el-select>>>input{
        height: 35px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 28px;
    }
    .myul{
        list-style: none;
        margin-top: 3px;
    }
    .myul li{
        margin-left: -39px;
        margin-top: 5px;
        width: 129px;
        text-align: center;
        height: 30px;
        line-height: 35px;
    }
    .myul li:hover{
        background-color: #BFBFBF;
        cursor: pointer;
    }
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }
    .el-cascader--mini {
        font-size: 12px;
        line-height: 35px;
    }
</style>